<template>
	<view class="my-textarea">
		<view class="uni-textarea" :style="{'height':heigth}">
			<textarea :placeholder="placeholder" :maxlength="valMax" class="textarea-ui" :show-confirm-bar="true"
				:value="value" placeholder-class="placeholderText" @input="inputHandle" />
			<view class="size">
				<text class="curr-text">{{size}}</text>/<text class="max-text">{{valMax}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			valMax: {
				type: Number,
				default: 300
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			value: {
				type: String,
				default: ''
			},
			heigth: {
				type: String,
				default: '600rpx'
			}
		},
		computed: {
			size() {
				return this.value.length;
			}
		},
		methods: {
			inputHandle(e) {
				let val = e.target.value;
				this.$emit("input", val)
			}
		}
	}
</script>

<style lang="scss">
	.placeholderText {
		color: $font-cA7;
	}
	.my-textarea {
		.uni-textarea {
			padding-left: 30rpx;
			padding-right: 30upx;
			padding-top: 10upx;
			height: 400upx;
			position: relative;

			.textarea-ui {
				width: 100%;
				font-size: 30upx;
				font-family: STXihei;
				font-weight: 400;
				height: 100%;
				color: $font-c10;
				position: relative;
			}

			.size {
				position: absolute;
				bottom: -36upx;
				right: 30upx;

				.max-text {
					color: $font-c10;
				}

				.curr-text {
					color: $btn-bg;
				}
			}
		}
	}
</style>
